<template>
  <div class='system'>
    <el-form :model="system" inline class="system-form">
      <el-form-item label="服务器操作系统:"> <span>{{system.sysServerName}} </span> </el-form-item>
      <el-form-item label="Web 服务器:"> <span> {{system.sysServerName}} </span> </el-form-item>
      <el-form-item label="PHP 版本:"> <span> {{system.serverVersion}} </span> </el-form-item>
      <el-form-item label="MySQL 版本:"> <span> {{system.mysqlVersion}} </span> </el-form-item>
      <el-form-item label="安全模式:"> <span> {{system.safeMode}} </span> </el-form-item>
      <el-form-item label="安全模式GID:"> <span> {{system.safeModeGid}} </span> </el-form-item>
      <el-form-item label="Socket 支持:"> <span> {{system.socket}} </span> </el-form-item>
      <el-form-item label="时区设置:"> <span> {{system.timeZone}} </span> </el-form-item>
      <el-form-item label="GD 版本:"> <span> {{system.gdVersion}} </span> </el-form-item>
      <el-form-item label="Zlib 支持:"> <span> {{system.zlib}} </span> </el-form-item>
      <el-form-item label="IP 库版本:"> <span> {{system.ipVersion}} </span> </el-form-item>
      <el-form-item label="文件上传的最大大小:"> <span> {{system.fileMax}} </span> </el-form-item>
      <el-form-item label="程序版本:"> <span> {{system.programVersion}} </span> </el-form-item>
      <el-form-item label="安装日期:"> <span> {{system.installDate}} </span> </el-form-item>
      <el-form-item label="编码:"> <span> {{system.code}} </span> </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { readAdminSysServerInfo } from '@/api/sys';
export default {
  name: 'system',
  data () {
    return {
      system: {}
    }
  },
  mounted () {
    this.getMsg()
  },
  methods: {
     getMsg () {
      readAdminSysServerInfo().then(res => {
        this.system = res;
      })
    },
  }
}
</script>

<style lang='scss' scoped>

.system {
  box-sizing: border-box;
  margin-top: 30px;
  .system-form {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;

    ::v-deep .el-form-item {
      width: 50%;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
      margin: 0;
      &:nth-last-child(-n+1) {
        border: 0;
      }
      &:nth-child(odd) {
        border-right: 1px solid  #eee;
      }
    }

    ::v-deep .el-form-item__label {
      float: left;
      width: 200px;
      text-align: center;
      background-color: #F9FAFC;
      border-right: 1px solid  #eee;
    }

    ::v-deep .el-form-item__content {
      display: block;
      text-align: center;
    }

    ::v-deep .el-form-item__label,
    ::v-deep .el-form-item__content {
      line-height: 50px;
    }
  }
}
</style>
